<template>
  <div class="page-class">
    <Breadcrumb>
      <a-button type="primary" @click="handleSave">保存</a-button>
    </Breadcrumb>
    <div class="form-cont">
      <Form ref="formRef" :data="data" :type="type"></Form>
    </div>
  </div>
</template>
<script>
import httpApi from "@/api/vote";
import Form from "./compoments/Form";
import { guid } from "@/utils";
import moment from "moment";

export default {
  components: {
    Form
  },
  data() {
    return {
      time: -1,
      data: {
        subject: undefined,
        images: [],
        content: undefined,
        maxType: 1,
        maxCount: undefined,
        voteUpdateType: 1,
        endTime: null,
        selectType: 1,
        voteOptionList: [],
        sendRange: 1,
        spaceId: undefined,
        voteResult: 1
      }
    };
  },
  mounted() {
    if (this.type === "add") {
      // 添加
      this.initList();
    } else if (this.$route.query.type === "2") {
      // 编辑
      this.getDetail(this.$route.query.id);
    }
  },
  computed: {
    type() {
      return this.$route.query.type === "1" ? "add" : "edit";
    }
  },
  methods: {
    getDetail(id) {
      this.loading = true;
      httpApi
        .getDetail({
          strId: id
        })
        .then((res) => {
          this.loading = false;
          if (res.retcode === 0) {
            let data = res.data || {};
            this.data = this.formateData(data);
          } else {
            this.data = {};
          }
        })
        .catch((err) => {
          this.loading = false;
          this.data = {};
          this.$message.error(err.msg);
        });
    },
    formateData(data) {
      let maxType = 1;
      let count = null;
      if (data.maxUserNum) {
        maxType = 2;
        count = data.maxUserNum;
      }
      data.maxType = maxType;
      data.count = count;
      if (data.showPicUrl) {
        data.images = [
          {
            uid: guid(),
            name: "image.png",
            status: "done",
            url: data.showPicUrl,
            picFileId: data.picFileId
          }
        ];
      } else {
        data.images = [];
      }

      if (data.endTime) {
        data.endTime = moment(data.endTime);
      }
      if (data.voteOptionList) {
        // 排序
        data.voteOptionList.sort((a, b) => {
          return a.sort - b.sort;
        });
      }
      return data;
    },
    initList() {
      this.data = {
        subject: "",
        images: [],
        content: null,
        endTime: null,
        voteUpdateType: 1,
        selectType: 1,
        maxType: 1,
        count: null,
        voteOptionList: [
          {
            index: guid(),
            optionContent: ""
          },
          {
            index: guid(),
            optionContent: ""
          }
        ],
        //
        sendRange: 1,
        spaceId: undefined,
        voteResult: 1
      };
    },
    handleSave() {
      clearTimeout(this.time);
      this.time = setTimeout(() => {
        this.$refs.formRef.validate();
      }, 600);
    }
  }
};
</script>

<style lang="less" scoped>
.form-cont {
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow: auto;
}
</style>
